<html>

<style>
    * {
        margin: 0;
    }

    body {
        overflow: hidden;
        display: grid;
        grid-template-rows: 150px auto;
    }

    #content {
        background-color: pink;
        white-space: pre;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        canvas画布大小布局，window.onresize时需要调整render.setSize, camera.aspect
        // 部分渲染
        let width = canvasDom.offsetWidth
        let height = canvasDom.offsetHeight
        // 全屏渲染  在这里又没用了？
        let width = window.innerWidth
        let height =  window.innerHeight
    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        
        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        // 世界里面需要add物体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const material = new THREE.PointsMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        //设置网格模型在三维空间中的位置坐标，默认是坐标原点
        cube.position.set(0, 0.5, 0);
        scene.add(cube);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(10);
        scene.add(axesHelper);

        let canvasDom = document.getElementById("canvas");
        // 部分渲染
        let width = canvasDom.offsetWidth
        let height = canvasDom.offsetHeight
        // 全屏渲染
        // let width = window.innerWidth
        // let height =  window.innerHeight

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        canvasDom.appendChild(renderer.domElement);


        // 设置相机控件轨道控制器OrbitControls
        const controls = new OrbitControls(camera, canvasDom);
        // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
        controls.addEventListener('change', function () {
            renderer.render(scene, camera); //执行渲染操作
        });//监听鼠标、键盘事件

        renderer.render(scene, camera);

        // onresize 事件会在窗口被调整大小时发生
        window.onresize = function () {
            width = canvasDom.offsetWidth
            height = canvasDom.offsetHeight
            console.log("width height", width, height);
            // 重置渲染器输出画布canvas尺寸
            renderer.setSize(width, height);
            // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
            camera.aspect = width / height;
            // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
            // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
            // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
            camera.updateProjectionMatrix();
        };
    </script>
</body>

</html>